<?php
	session_start();
?>
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>iQuit | Guide</title>
        <meta name="description" content="A mobile application to help you quit smoking.">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="css/style.css">
		<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
		<script src="js/jquery.nicescroll.js"></script>
		<script>
			function init() {
				$("#scroller").niceScroll({autohidemode:false});
				
				function updateList() {
					var xmlhttp;
					
					$("#scroller").niceScroll({autohidemode:false});
					if (window.XMLHttpRequest){	// code for IE7+, Firefox, Chrome, Opera, Safari
						xmlhttp = new XMLHttpRequest();
					}
					else {// code for IE6, IE5
						xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
					}
					
					xmlhttp.onreadystatechange = function() {
						if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
							document.getElementById("remedies").innerHTML = xmlhttp.responseText;
						}
					}
					var list = document.getElementById("symptom-select");
					xmlhttp.open("GET", "symptom.php?q=" + list.options[list.selectedIndex].value, true);					
					xmlhttp.send();
					
					
				}
				
				document.getElementById("symptom-select").addEventListener('change', updateList, false);
			}
			
			window.addEventListener('load', init, false);
			
		</script>
	</head>
	<body>
		<div id="main-wrapper">
			<?php 
				include "includes/nav.php";
			?>
			<header>
				iQuit
			</header>
			<div id="scroller">
				<div id="content">
					<div class="contentmargins">
						<h2>What withdrawal symptom do you need help with?</h2>
						<div class="styled-select">
							<select id="symptom-select">						
								<option value="default">Select a symptom</option>
								<option value="anxiety">Anxiety</option>
								<option value="cravings">Cravings</option>
								<option value="headaches">Headaches</option>
								<option value="muscleaches">Muscle aches</option>
							</select>
						</div>
						<div id="remedies">					
						</div>
					</div>			
					<div id="twitter">
						<p>Can't find what you're looking for?  Tweet about it!</p>
						<input type="text" value ="#iQuit your text here" id="twitter-post" name="twitter-post"/>
						<button type="button" value="tweet" id="tweet" name="Tweet">Tweet</button>
					</div>			
				</div>
			</div>
		</div>
	</body>
</html>